<template>
  <div class="main">
    <div class="search clearfix">
      <el-input
        v-model="modelname"
        :clearable="true"
        placeholder="请输入站点类型名称"
        :style="{ width: '200px' }"
      ></el-input>
      <el-button type="primary" @click="getmodel">查询</el-button>
      <el-button type="primary" @click="addmodel">新增</el-button>
    </div>

    <div class="table">
      <dv-border-box-11 :color="['#11caff']" backgroundColor="transparent" title="站点类型">
      <el-table
        :data="tableData"
        class="customer-table"
        height="71vh"
        :header-cell-style="headClass"
      >
        <el-table-column type="index" width="50"> </el-table-column>
        <el-table-column prop="name" label="站点类型名称" align="center">
        </el-table-column>
        <el-table-column prop="pointCount" label="测温点数" align="center">
        </el-table-column>
        <el-table-column prop="aisleCount" label="通道数" align="center">
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime.substring(0, 10) }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="change(scope.row)"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        @prev-click="prevclick"
        @next-click="nextclick"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total,prev, pager, next"
        :total="total"
      >
      </el-pagination>
      </dv-border-box-11>
    </div>

    <!-- 更新通道模型版本 -->
    <el-dialog
      class="model-update"
      title="更新站点类型"
      :inline="true"
      :visible.sync="dialogFormVisible2"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="updateform"
        label-position="left"
        label-width="100px"
        ref="updateruleform"
        :rules="updaterules"
      >
        <el-form-item label="通道名称" prop="name">
          <el-input v-model="updateform.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remake">
          <el-input v-model="updateform.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="bettarysize" name="1">
          <el-form
            :model="updatedynamicValidateForm"
            ref="updatedynamicValidateForm"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in updatedynamicValidateForm.domains">
              <el-form-item
                :label="'通道' + item.index"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>

              <el-form-item
                label="测温点数量"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input value="20" readonly="readonly"></el-input>
              </el-form-item>
              <el-button @click.prevent="updateremoveDomain(item)"
                >删除</el-button
              >
            </div>
            <el-button @click="updateaddDomain">新增通道</el-button>
            <el-button @click="resetForm('updatedynamicValidateForm')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>

        <el-collapse-item :title="chestsize" name="2">
          <el-form
            :model="updatedynamicValidateForm2"
            ref="updatedynamicValidateForm2"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in updatedynamicValidateForm2.domains">
              <el-form-item
                :label="'通道' + item.index"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>

              <el-form-item
                label="测温点数量"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input value="20" readonly="readonly"></el-input>
              </el-form-item>
              <el-button @click.prevent="updateremoveDomain2(item)"
                >删除</el-button
              >
            </div>
            <el-button @click="updateaddDomain2">新增通道</el-button>
            <el-button @click="resetForm('updatedynamicValidateForm2')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>

        <el-collapse-item :title="trunkingsize" name="3">
          <el-form
            :model="updatedynamicValidateForm3"
            ref="updatedynamicValidateForm3"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in updatedynamicValidateForm3.domains">
              <el-form-item
                :label="'通道' + item.index"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>
              <el-form-item
                label="测温点数量"
                :key="item.key"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input value="20" readonly="readonly"></el-input>
              </el-form-item>
              <el-button @click.prevent="updateremoveDomain3(item)"
                >删除</el-button
              >
            </div>
            <el-button @click="updateaddDomain3">新增通道</el-button>
            <el-button @click="resetForm('updatedynamicValidateForm3')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="submitupdateForm(updateform)"
            >提交</el-button
          >
          <el-button @click="updateout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 新增站点版本 -->
    <el-dialog
      class="model-add"
      title="新增站点类型"
      :inline="true"
      :visible.sync="dialogFormVisible"
      :append-to-body="true"
    >
      <el-form
        class="clearfix"
        :model="addform"
        label-position="left"
        label-width="100px"
        ref="addruleform"
        :rules="addrules"
      >
        <el-form-item label="通道名称" prop="name">
          <el-input v-model="addform.name"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remake">
          <el-input v-model="addform.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-collapse v-model="activeNames">
        <el-collapse-item :title="bettarysize" name="1">
          <el-form
            :model="dynamicValidateForm"
            ref="dynamicValidateForm"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in dynamicValidateForm.domains">
              <el-form-item
                :label="item.label"
                :key="item.key"
                :prop="'domains.' + index + '.aisleName'"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>

              <el-form-item
                label="测温点数量"
                :key="item.key"
                :prop="'domains.' + index + '.pointCount'"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="item.pointCount"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-button @click.prevent="removeDomain(item)">删除</el-button>
            </div>
            <el-button @click="addDomain">新增通道</el-button>
            <el-button @click="resetForm('dynamicValidateForm')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>

        <el-collapse-item :title="chestsize" name="2">
          <el-form
            :model="dynamicValidateForm2"
            ref="dynamicValidateForm2"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in dynamicValidateForm2.domains">
              <el-form-item
                :label="item.label"
                :key="item.key"
                :prop="'domains.' + index + '.aisleName'"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>

              <el-form-item
                label="测温点数量"
                :key="item.key"
                :prop="'domains.' + index + '.pointCount'"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="item.pointCount"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-button @click.prevent="removeDomain2(item)">删除</el-button>
            </div>
            <el-button @click="addDomain2">新增通道</el-button>
            <el-button @click="resetForm('dynamicValidateForm2')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>

        <el-collapse-item :title="trunkingsize" name="3">
          <el-form
            :model="dynamicValidateForm3"
            ref="dynamicValidateForm3"
            label-width="100px"
            class="demo-dynamic"
          >
            <div v-for="(item, index) in dynamicValidateForm3.domains">
              <el-form-item
                :label="item.label"
                :key="item.key"
                :prop="'domains.' + index + '.aisleName'"
                :rules="{
                  required: true,
                  message: '通道名不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input v-model="item.aisleName"></el-input>
              </el-form-item>

              <el-form-item
                label="测温点数量"
                :key="item.key"
                :prop="'domains.' + index + '.pointCount'"
                :rules="{
                  required: true,
                  message: '测温点数量不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="item.pointCount"
                  readonly="readonly"
                ></el-input>
              </el-form-item>
              <el-button @click.prevent="removeDomain3(item)">删除</el-button>
            </div>
            <el-button @click="addDomain3">新增通道</el-button>
            <el-button @click="resetForm('dynamicValidateForm3')"
              >重置</el-button
            >
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-form>
        <el-form-item>
          <el-button type="primary" @click="submitaddForm">提交</el-button>
          <el-button @click="addout">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "modellist",
  data() {
    return {
      dialogFormVisible: false, //新增通道版本弹窗
      dialogFormVisible2: false, //修改通道版本弹窗
      currentPage: 1,
      pagesize: 10,
      total: 0,
      modelname: "",
      num: 0,
      num2: 0,
      num3: 0,
      updatenum: 0,
      updatenum2: 0,
      updatenum3: 0,
      bettarysize: "电池仓",
      chestsize: "充电柜",
      trunkingsize: "线槽",
      activeNames: ["1"],
      tableData: [],
      addform: {
        name: "",
        remark: "",
      },
      updateform: {},
      addrules: {},
      updaterules: {},
      dynamicValidateForm: {
        domains: [],
      },
      dynamicValidateForm2: {
        domains: [],
      },
      dynamicValidateForm3: {
        domains: [],
      },
      updatedynamicValidateForm: {
        domains: [],
      },
      updatedynamicValidateForm2: {
        domains: [],
      },
      updatedynamicValidateForm3: {
        domains: [],
      },
    };
  },
  watch: {
    currentPage() {
      this.getmodel();
    },
  },
  methods: {
    headClass() {
      return "background-color: transparent;color:#fff;font-weight:bold;";
    },
    //获取通道版本列表
    getmodel() {
      let params = {
        typeName: this.modelname,
        page: {
          pageNo: this.currentPage,
          pageSize: this.pagesize,
        },
      };
      this.$http
        .post("/site/type/list", params)
        .then((res) => {
          if (res.data.h.code == 0) {
            this.tableData = res.data.b.result;
            this.total = res.data.b.totalCount;
          }
        })
        .catch((err) => {});
    },
    //添加模型
    addmodel() {
      this.dialogFormVisible = true;
    },
    addout() {
      this.dialogFormVisible = false;
    },
    updateout() {
      this.dialogFormVisible2 = false;
    },
    //上一页
    prevclick() {
      this.currentPage--;
    },
    //下一页
    nextclick() {
      this.currentPage++;
    },
    //分页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    change(row) {
      let params = new FormData(); //转成formdata格式
      params.append("typeId", row.id);
      this.$http.post("/site/type/details/list", params).then((res) => {
        if (res.data.h.code == 0) {
          this.updatedynamicValidateForm.domains = res.data.b.warehouse;
          this.updatedynamicValidateForm2.domains = res.data.b.cabinet;
          this.updatedynamicValidateForm3.domains = res.data.b.line;
        }
      });
      this.dialogFormVisible2 = true;
      this.updateform = Object.assign({}, row);
    },

    //删除通道模型
    handleDelete(row) {
      this.$confirm("此操作将删除该通道版本, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let params = new FormData(); //转成formdata格式
          params.append("typeId", row.id);
          this.$http.post("/site/type/del", params).then((res) => {
            if (res.data.h.code == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              //重新请求通道模型列表
              this.getmodel();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //新增模型表单提交
    submitaddForm() {
      this.$refs.dynamicValidateForm.validate((valid) => {
        if (valid) {
          var details = [];
          details = this.dynamicValidateForm.domains.concat(
            this.dynamicValidateForm2.domains,
            this.dynamicValidateForm3.domains
          );
          let params = {
            aisleCount:
              this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              this.dynamicValidateForm3.domains.length,
            name: this.addform.name,
            remark: this.addform.remark,
            pointCount:
              (this.dynamicValidateForm.domains.length +
                this.dynamicValidateForm2.domains.length +
                this.dynamicValidateForm3.domains.length) *
              20,
            details: details,
          };
          this.$http
            .post("/site/type/add", params)
            .then((res) => {
              if (res.data.h.code == 0) {
                this.addout();
                this.getmodel();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            })
            .catch((err) => {});
        } else {
          this.$message({
            message: "表单填写有误，请重新填写",
            type: "warning",
          });
          return false;
        }
      });
    },
    submitupdateForm(form) {
      this.$refs.updatedynamicValidateForm.validate((valid) => {
        if (valid) {
          if (valid) {
            var details = [];
            details = this.updatedynamicValidateForm.domains.concat(
              this.updatedynamicValidateForm2.domains,
              this.updatedynamicValidateForm3.domains
            );
            let params = {
              aisleCount:
                this.updatedynamicValidateForm.domains.length +
                this.updatedynamicValidateForm2.domains.length +
                this.updatedynamicValidateForm3.domains.length,
              name: form.name,
              remark: form.remark,
              pointCount:
                (this.updatedynamicValidateForm.domains.length +
                  this.updatedynamicValidateForm2.domains.length +
                  this.updatedynamicValidateForm3.domains.length) *
                20,
              details: details,
              id: form.id,
            };
            this.$http
              .post("/site/type/update", params)
              .then((res) => {
                if (res.data.h.code == 0) {
                  this.dialogFormVisible2 = false;
                  this.getmodel();
                  this.$message({
                    message: "更新成功",
                    type: "success",
                  });
                }
              })
              .catch((err) => {});
          } else {
            this.$message({
              message: "表单填写有误，请重新填写",
              type: "warning",
            });
            return false;
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //删除电池仓通道（新增通道版本）
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.num--;
        this.dynamicValidateForm.domains.splice(index, 1);
        this.num2 = 0;
        this.dynamicValidateForm2.domains.map((item) => {
          this.num2++;
          if (item) {
            item.label =
              "通道" +
              Number(this.dynamicValidateForm.domains.length + this.num2);
          }
        });
        this.num3 = 0;
        this.dynamicValidateForm3.domains.map((item) => {
          this.num3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.dynamicValidateForm.domains.length +
                  this.dynamicValidateForm2.domains.length +
                  this.num3
              );
          }
        });
        if (this.dynamicValidateForm.domains.length > 0) {
          this.bettarysize =
            "电池仓" +
            "(" +
            1 +
            "~" +
            this.dynamicValidateForm.domains.length +
            ")";
        }
        {
          this.bettarysize = "电池仓";
        }

        if (
          this.dynamicValidateForm.domains.length >= 1 &&
          this.dynamicValidateForm2.domains.length > 0
        ) {
          this.chestsize =
            "充电柜" +
            "(" +
            (this.dynamicValidateForm.domains.length + 1) +
            "~" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length) +
            ")";
        }

        if (
          this.dynamicValidateForm.domains.length >= 1 &&
          this.dynamicValidateForm2.domains.length >= 1 &&
          this.dynamicValidateForm3.domains.length > 0
        ) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.lenght +
              1) +
            "~" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              this.dynamicValidateForm3.domains.length) +
            ")";
        }
      }
    },
    //删除电池仓通道（更新通道版本）
    updateremoveDomain(item) {
      var index = this.updatedynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.updatedynamicValidateForm.domains.splice(index, 1);
        this.updatenum2 = 0;
        this.updatedynamicValidateForm2.domains.map((item) => {
          this.updatenum2++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.updatedynamicValidateForm.domains.length + this.updatenum2
              );
          }
        });
        this.updatenum3 = 0;
        this.updatedynamicValidateForm3.domains.map((item) => {
          this.updatenum3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.updatedynamicValidateForm.domains.length +
                  this.updatedynamicValidateForm2.domains.length +
                  this.updatenum3
              );
          }
        });
        if (this.updatedynamicValidateForm.domains.length > 0) {
          this.bettarysize =
            "电池仓" +
            "(" +
            1 +
            "~" +
            this.updatedynamicValidateForm.domains.length +
            ")";
        }
        {
          this.bettarysize = "电池仓";
        }

        if (
          this.updatedynamicValidateForm.domains.length >= 1 &&
          this.updatedynamicValidateForm2.domains.length > 0
        ) {
          this.chestsize =
            "充电柜" +
            "(" +
            (this.updatedynamicValidateForm.domains.length + 1) +
            "~" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length) +
            ")";
        }

        if (
          this.updatedynamicValidateForm.domains.length >= 1 &&
          this.updatedynamicValidateForm2.domains.length >= 1 &&
          this.updatedynamicValidateForm3.domains.length > 0
        ) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.lenght +
              1) +
            "~" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length +
              this.updatedynamicValidateForm3.domains.length) +
            ")";
        }
      }
    },
    //删除充电柜通道(新增通道版本)
    removeDomain2(item) {
      var index = this.dynamicValidateForm2.domains.indexOf(item);
      if (index !== -1) {
        this.num2--;
        this.dynamicValidateForm2.domains.splice(index, 1);
        this.num2 = 0;
        this.dynamicValidateForm2.domains.map((item) => {
          this.num2++;
          if (item) {
            item.label =
              "通道" +
              Number(this.dynamicValidateForm.domains.length + this.num2);
          }
        });
        this.num3 = 0;
        this.dynamicValidateForm3.domains.map((item) => {
          this.num3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.dynamicValidateForm.domains.length +
                  this.dynamicValidateForm2.domains.length +
                  this.num3
              );
          }
        });
        if (this.dynamicValidateForm2.domains.length > 0) {
          this.chestsize =
            "充电柜" +
            "(" +
            (this.dynamicValidateForm.domains.length + 1) +
            "~" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length) +
            ")";
        } else {
          this.chestsize = "充电柜";
        }
        if (this.dynamicValidateForm3.domains.length > 0) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              1) +
            "~" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              this.dynamicValidateForm3.domains.length) +
            ")";
        } else {
          this.trunkingsize = "线槽";
        }
      }
    },
    //删除充电柜通道(更新通道版本)
    updateremoveDomain2(item) {
      var index = this.updatedynamicValidateForm2.domains.indexOf(item);
      if (index !== -1) {
        this.updatedynamicValidateForm2.domains.splice(index, 1);
        this.updatenum2 = 0;
        this.updatedynamicValidateForm2.domains.map((item) => {
          this.updatenum2++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.updatedynamicValidateForm.domains.length + this.updatenum2
              );
          }
        });
        this.updatenum3 = 0;
        this.updatedynamicValidateForm3.domains.map((item) => {
          this.updatenum3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.updatedynamicValidateForm.domains.length +
                  this.updatedynamicValidateForm2.domains.length +
                  this.updatenum3
              );
          }
        });
        if (this.updatedynamicValidateForm2.domains.length > 0) {
          this.chestsize =
            "充电柜" +
            "(" +
            (this.updatedynamicValidateForm.domains.length + 1) +
            "~" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length) +
            ")";
        } else {
          this.chestsize = "充电柜";
        }
        if (this.updatedynamicValidateForm3.domains.length > 0) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length +
              1) +
            "~" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length +
              this.updatedynamicValidateForm3.domains.length) +
            ")";
        } else {
          this.trunkingsize = "线槽";
        }
      }
    },
    //删除线槽通道(新增版本模型)
    removeDomain3(item) {
      var index = this.dynamicValidateForm3.domains.indexOf(item);
      if (index !== -1) {
        this.num3--;
        this.dynamicValidateForm3.domains.splice(index, 1);
        this.num3 = 0;
        this.dynamicValidateForm3.domains.map((item) => {
          this.num3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.dynamicValidateForm.domains.length +
                  this.dynamicValidateForm2.domains.length +
                  this.num3
              );
          }
        });
        if (this.dynamicValidateForm3.domains.length > 0) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              1) +
            "~" +
            (this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length +
              this.dynamicValidateForm3.domains.length) +
            ")";
        } else {
          this.trunkingsize = "线槽";
        }
      }
    },
    //删除线槽通道(更新版本模型)
    updateremoveDomain3(item) {
      var index = this.updatedynamicValidateForm3.domains.indexOf(item);
      if (index !== -1) {
        this.updatedynamicValidateForm3.domains.splice(index, 1);
        this.updatenum3 = 0;
        this.updatedynamicValidateForm3.domains.map((item) => {
          this.updatenum3++;
          if (item) {
            item.label =
              "通道" +
              Number(
                this.updatedynamicValidateForm.domains.length +
                  this.updatedynamicValidateForm2.domains.length +
                  this.updatenum3
              );
          }
        });
        if (this.updatedynamicValidateForm3.domains.length > 0) {
          this.trunkingsize =
            "线槽" +
            "(" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length +
              1) +
            "~" +
            (this.updatedynamicValidateForm.domains.length +
              this.updatedynamicValidateForm2.domains.length +
              this.updatedynamicValidateForm3.domains.length) +
            ")";
        } else {
          this.trunkingsize = "线槽";
        }
      }
    },
    //新增电池仓通道(新增版本模型)
    addDomain() {
      this.num++;
      this.dynamicValidateForm.domains.push({
        label: "通道" + this.num,
        aisleName: "",
        aisleType: "warehouse",
        pointCount: "20",
        index: this.num,
      });
      this.num2 = 0;
      this.dynamicValidateForm2.domains.map((item) => {
        this.num2++;
        if (item) {
          item.label =
            "通道" +
            Number(this.dynamicValidateForm.domains.length + this.num2);
          item.index = this.dynamicValidateForm.domains.length + this.num2;
        }
      });
      this.num3 = 0;
      this.dynamicValidateForm3.domains.map((item) => {
        this.num3++;
        if (item) {
          item.label =
            "通道" +
            Number(
              this.dynamicValidateForm.domains.length +
                this.dynamicValidateForm2.domains.length +
                this.num3
            );
          item.index =
            this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            this.num3;
        }
      });
      this.bettarysize =
        "电池仓" +
        "(" +
        1 +
        "~" +
        this.dynamicValidateForm.domains.length +
        ")";
      if (this.dynamicValidateForm2.domains.length > 0) {
        this.chestsize =
          "充电柜" +
          "(" +
          (this.dynamicValidateForm.domains.length + 1) +
          "~" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length) +
          ")";
      }
      if (this.dynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            this.dynamicValidateForm3.domains.length);
        (")");
      }
    },
    //新增电池仓通道(更新版本模型)
    updateaddDomain() {
      this.updatedynamicValidateForm.domains.push({
        aisleName: "",
        aisleType: "warehouse",
        pointCount: "20",
        index: this.updatedynamicValidateForm.domains.length + 1,
        key: Date.now(),
      });
      this.updatenum2 = 0;
      this.updatedynamicValidateForm2.domains.map((item) => {
        this.updatenum2++;
        if (item) {
          item.index =
            this.updatedynamicValidateForm.domains.length + this.updatenum2;
        }
      });
      this.numupdate3 = 0;
      this.updatedynamicValidateForm3.domains.map((item) => {
        this.numupdate3++;
        if (item) {
          item.index =
            this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            this.updatenum3;
        }
      });
      this.bettarysize =
        "电池仓" +
        "(" +
        1 +
        "~" +
        this.updatedynamicValidateForm.domains.length +
        ")";
      if (this.updatedynamicValidateForm2.domains.length > 0) {
        this.chestsize =
          "充电柜" +
          "(" +
          (this.updatedynamicValidateForm.domains.length + 1) +
          "~" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length) +
          ")";
      }
      if (this.updatedynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            this.updatedynamicValidateForm3.domains.length) +
          ")";
      }
    },
    //新增充电柜通道(新增版本模型)
    addDomain2() {
      this.num2++;
      this.dynamicValidateForm2.domains.push({
        label:
          "通道" + Number(this.num2 + this.dynamicValidateForm.domains.length),
        aisleName: "",
        aisleType: "cabinet",
        pointCount: "20",
        index: this.num2 + this.dynamicValidateForm.domains.length,
      });
      this.num3 = 0;
      this.dynamicValidateForm3.domains.map((item) => {
        this.num3++;
        if (item) {
          item.label =
            "通道" +
            Number(
              this.dynamicValidateForm.domains.length +
                this.dynamicValidateForm2.domains.length +
                this.num3
            );
          item.index =
            this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            this.num3;
        }
      });
      if (this.dynamicValidateForm2.domains.length > 0) {
        this.chestsize =
          "充电柜" +
          "(" +
          (this.dynamicValidateForm.domains.length + 1) +
          "~" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length) +
          ")";
      }
      if (this.dynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            this.dynamicValidateForm3.domains.length) +
          ")";
      }
    },
    //新增充电柜通道(更新版本模型)
    updateaddDomain2() {
      this.updatedynamicValidateForm2.domains.push({
        aisleName: "",
        aisleType: "cabinet",
        pointCount: "20",
        index:
          1 +
          this.updatedynamicValidateForm.domains.length +
          this.updatedynamicValidateForm2.domains.length,
        key: Date.now(),
      });
      this.updatenum3 = 0;
      this.updatedynamicValidateForm3.domains.map((item) => {
        this.updatenum3++;
        if (item) {
          item.index =
            this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            this.updatenum3;
        }
      });
      if (this.updatedynamicValidateForm2.domains.length > 0) {
        this.chestsize =
          "充电柜" +
          "(" +
          (this.updatedynamicValidateForm.domains.length + 1) +
          "~" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length) +
          ")";
      }
      if (this.updatedynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            this.updatedynamicValidateForm3.domains.length) +
          ")";
      }
    },
    //新增线槽通道(新增版本模型)
    addDomain3() {
      this.num3++;
      this.dynamicValidateForm3.domains.push({
        label:
          "通道" +
          Number(
            this.num3 +
              this.dynamicValidateForm.domains.length +
              this.dynamicValidateForm2.domains.length
          ),
        aisleName: "",
        aisleType: "line",
        pointCount: "20",
        index:
          this.num3 +
          this.dynamicValidateForm.domains.length +
          this.dynamicValidateForm2.domains.length,
      });
      if (this.dynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.dynamicValidateForm.domains.length +
            this.dynamicValidateForm2.domains.length +
            this.dynamicValidateForm3.domains.length) +
          ")";
      }
    },
    //新增线槽通道(更新版本模型)
    updateaddDomain3() {
      this.updatedynamicValidateForm3.domains.push({
        aisleName: "",
        aisleType: "line",
        pointCount: "20",
        index:
          this.updatedynamicValidateForm.domains.length +
          this.updatedynamicValidateForm2.domains.length +
          this.updatedynamicValidateForm3.domains.length +
          1,
        key: Date.now(),
      });
      if (this.updatedynamicValidateForm3.domains.length > 0) {
        this.trunkingsize =
          "线槽" +
          "(" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            1) +
          "~" +
          (this.updatedynamicValidateForm.domains.length +
            this.updatedynamicValidateForm2.domains.length +
            this.updatedynamicValidateForm3.domains.length) +
          ")";
      }
    },
  },
  mounted() {
    this.getmodel();
  },
};
</script>

<style  scoped>
.search {
  padding-left: 20px;
  box-sizing: border-box;
  display: inline-block;
}
.search .el-select {
  float: left;
  width: 120px;
  margin-right: 10px;
}
.search .el-input {
  float: left;
  width: 150px;
  margin-right: 10px;
}
.model-add .el-form .el-form-item {
  display: inline-block;
  width: 40%;
}
.model-add .el-form .el-input {
  width: 80%;
  margin-right: 20px;
  display: inline-block;
}
.model-update .el-form .el-form-item {
  display: inline-block;
  width: 40%;
}
.model-update .el-form .el-input {
  width: 80%;
  margin-right: 20px;
  display: inline-block;
}
.table {
  margin: 0 20px;
  box-sizing: border-box;
  height:83vh;
}
.el-pagination {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.el-form > div {
  margin-top: 10px;
}
.el-form > .el-button:nth-of-type(1) {
  margin-left: 100px;
}
</style>
<style>
.customer-table th {
  border: none;
}
.customer-table td,
.customer-table th.is-leaf {
  border: none;
}
</style>